{%extends 'base.html'%}
{%block head1%}
<link rel="stylesheet" href="/statics/css/detail.css">
<script>
$(function(){
    $('#fa-heart').click(function(){
    $.get('/ton/Good','tipid='+{{data.id}},function(data){
    if(data==1){
    num = $("#goodtip").text();
    num = parseInt(num)+1;
    $("#goodtip").html(num);
    }
    else{alert("你已经点过赞了!");}
    });
    });


    $('.fa-thumbs-o-up').click(function(){
    $.get('/ton/tonGoodTip','tonid='+$(this).attr("id"),function(data){
    if(data != 0){
    $id = "#"+data;
    num = $($id).text();
    num = parseInt(num)+1;
    $($id).html(num);
    }
    else{alert("不能重复点赞");}
    });
    });

    })
</script>
{%endblock head1%}
{%block content1%}
{%if data.artDivide == 0%}
<div class="arttitle"><div class="newart">技术分享</div></div>
{%elif data.artDivide == 1%}
<div class="arttitle"><div class="newart">读书笔记</div></div>
{%endif%}
		<!-- 后台填数据需要重复的部分 -->

	<div class="artbox">
		<hr>
		<div class="artdetail">
		<h2>{{data.artTitle}}</h2>
		<h3>{{data.artFTitle}}</h3>
		{{data.art|safe}}

			<!-- 这里填详情数据 -->
		</div>
        <!--==================文章人气msg==================-->
        <div class="artdetail">
            <div class="artmsg">&nbsp;&nbsp;<i class="fa fa-calendar" aria-hidden="true">&nbsp;{{data.createTime}}</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-eye" aria-hidden="true">&nbsp;{{data.lookTip}}</i>&nbsp;&nbsp;&nbsp;<i class="fa fa-heart" aria-hidden="true" id="fa-heart">&nbsp;<span id="goodtip">{{data.goodTip}}</span></i>&nbsp;&nbsp;&nbsp;<i class="fa fa-commenting-o" aria-hidden="true">&nbsp;{{data.sayTip}}</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-tag" aria-hidden="true">{%if data.artDivide == 0%}&nbsp;技术分享{%else%}&nbsp;读书笔记{%endif%}</i></div>
        </div>
        <!--=================================================-->
		<!--=================评论框================-->
		<hr>
		<div class="artdetail">
			<form action="{%url 'tonApp:recvton'%}" method="post">
				{%csrf_token%}
				<ul>
				<li><input type="text" value="{{data.id}}" name="arttip" style="display:none;"></li>
				<li class="tonfont">评论一下</li>
				<li><textarea name="userTon" id="" cols="79" rows="6" class="contentarea"></textarea></li>
				<li><input type="submit" value="发&nbsp;&nbsp;&nbsp;表" class="areasub"></li>
				</ul>
			</form>
		</div>
		<!--=======================================-->
		<!--====================评论区展示================-->
		{%if tonlist%}
		{%for data in tonlist%}
		<div class="artdetail">
			<hr>
				<ul style="margin-top:5px">
				<li class="user_pic_msg"><div class="userphoto">{%if data.tonMesage.userPic == 'a'%}<img src="/statics/usermedia/siteinit.jpg" class="photosize">{%else%}<img src="{{data.tonMesage.userPic}}" class="photosize">{%endif%}</div><div class="usermsg "><span>{{data.tonMesage.loveName}}&nbsp;&nbsp;&nbsp;&nbsp;</span><span>{{data.tonTreateTime}}</span></div></li>
				<li><div>{{data.tonArea}}</div></li>
				<li class="tip"><i class="fa fa-thumbs-o-up" aria-hidden="true" id="{{data.id}}">{{data.tonGoodTip}}</i></li>
				</ul>
			</div>
		{%endfor%}
		{%else%}
		<div class="artdetail">
			<hr>
			<div class="nonemsg">暂时没有评论!</div>
		</div>
		{%endif%}
		<!--====================================================-->
		<!-- 这个hr是最后一个起美观作用的不包含在每一个文章元素内 -->
		<hr>
	</div>
{%endblock content1%}